<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="head :: head"></head>
<!--<link rel="stylesheet" href="../../static/vendors/bootstrap/dist/css/bootstrap.css">-->

<!--<link rel="stylesheet" href="./style.css">-->
<!--<script src="../../static/js/jquery-2.2.1.min.js"></script>-->
<!--<script src="../../static/vendors/bootstrap/dist/js/bootstrap.js"></script>-->
<!--<script src="../../static/js/Echarts/echarts.min.js"></script>-->
<!--<script src="../../static/js/jquery.flexslider-min.js" th:src="@{'/js/jquery.flexslider-min.js'}"></script>-->

<body>

<div class="container">
    <div class="main_container">
        <div class="right_col" role="main">
            <div class="row">
                <div class="col-lg-12 col-md-12 col-sm-12 title">
                    <div class="row">
                        <div class="col-lg-4 col-md-4 col-sm-4 leftshow">
                            <span></span>
                        </div>
                        <div class="col-lg-4 col-md-4 col-sm-4 centershow"></div>
                        <div class="col-lg-4 col-md-4 col-sm-4 rightshow">
                            <span>数据统计日期：</span><span class="fa_right_time"></span>
                        </div>
                    </div>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 subject">
                    <div class="row">
                        <div class="col-lg-3 col-md-3">
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 leftTop">
                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                        <span>井盖状态监测</span>
                                    </div>
                                    <div class="col-lg-12 leftTopImg">
                                        <div class="row">
                                            <div class="col-lg-6 ">
                                                <div class="row">
                                                    <div class="col-lg-6 col-md-6 col-sm-6"
                                                         style="line-height: 100px;text-align: center">
                                                        <img src="../../static/images/bigShow/jgt.png"
                                                             th:src="@{/images/bigShow/jgt.png}" alt="">
                                                    </div>
                                                    <div class="col-lg-6 col-md-6 col-sm-6" style="margin-top:23px;">
                                                        <p id="jgt"></p>
                                                        <p style="color: #ffd005">井盖总数量</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="row">
                                                    <div class="col-lg-6 col-md-6 col-sm-6"
                                                         style="line-height: 100px;text-align: center">
                                                        <img src="../../static/images/bigShow/gjjgt.png"
                                                             th:src="@{/images/bigShow/gjjgt.png}" alt="">
                                                    </div>
                                                    <div class="col-lg-6 col-md-6 col-sm-6" style="margin-top: 23px;">
                                                        <p id="jgt1"></p>
                                                        <p style="color: #7ecef4">告警井盖数量</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-lg-12" id="leftTop">


                                    </div>
                                </div>

                                <div class="col-lg-12 col-md-12 col-sm-12 leftMiddle">
                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                        <span>井室有害气体监测</span>
                                    </div>
                                    <div class="col-lg-12 leftMiddleImg">
                                        <div class="row">
                                            <div class="col-lg-6 ">
                                                <div class="row">
                                                    <div class="col-lg-6 col-md-6 col-sm-6"
                                                         style="line-height: 100px;text-align: center">
                                                        <img src="../../static/images/bigShow/zcjst.png"
                                                             th:src="@{/images/bigShow/zcjst.png}" alt="">
                                                    </div>
                                                    <div class="col-lg-6 col-md-6 col-sm-6"
                                                         style="margin-top: 23px">
                                                        <p id="jgtq"></p>
                                                        <p style="color: #ffd005">井室总数量</p>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-lg-6">
                                                <div class="row">
                                                    <div class="col-lg-6 col-md-6 col-sm-6"
                                                         style="line-height: 100px;text-align: center">
                                                        <img src="../../static/images/bigShow/ycjst.png"
                                                             th:src="@{/images/bigShow/ycjst.png}" alt="">
                                                    </div>
                                                    <div class="col-lg-6 col-md-6 col-sm-6"
                                                         style="margin-top:23px">
                                                        <p id="jgtq1"></p>
                                                        <p style="color: #7ecef4">异常井室数量</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-lg-6">

                                    </div>
                                    <div class="col-lg-6">

                                    </div>
                                    <div class="col-lg-12" id="leftMiddle">

                                    </div>

                                </div>

                                <div class="col-lg-12 col-md-12 col-sm-12 leftBottom">
                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                        <span>物联网部件</span>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                        <p>西单北大街133号左辅路通信a83904井盖</p>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12" id="content">

                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-6">
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 centerTop">
                                    <div class="col-lg-offset-4 col-md-offset-4 col-sm-offset-4 col-lg-6 col-md-6 col-sm-6"
                                         style="margin-top:15px;
                                     position: absolute;z-index: 99999 ">
                                        <div class="row">
                                            <button class="col-lg-4 col-md-4 col-sm-4 btn4" id="btn4">物联网设备分布图</button>
                                            <button class="col-lg-4 col-md-4 col-sm-4 btn5" id="btn5">人口热力图</button>
                                        </div>
                                    </div>
                                    <div id="iframe1" style="overflow: hidden"></div>

                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 centerBottom">
                                    <div class="row">
                                        <span>发展态势</span>
                                        <div class="col-lg-12 col-md-12 col-sm-12" style="height: 280px">
                                            <div class="flexslider">
                                                <ul class="slides" style="margin-top: 19px">
                                                    <li id="centerBottom"></li>
                                                    <li id="centerBottom1"></li>
                                                    <li id="centerBottom2"></li>
                                                    <li id="centerBottom3"></li>
                                                    <li id="centerBottom4"></li>
                                                    <li id="centerBottom5"></li>
                                                    <li id="centerBottom6"></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-3 col-md-3">
                            <div class="row">
                                <div class="col-lg-12 col-md-12 col-sm-12 rightTop">
                                    <div class="col-lg-12 col-md-12 col-sm-12">
                                        <span class="title">人口流量</span>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12" style="margin-top: 5px">
                                        <p>北京市海淀区中关村</p>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12 navTop">
                                        <span>0</span>
                                        <span>1</span>
                                        <span>2</span>
                                        <span>3</span>
                                        <span>3</span>
                                        <span>5</span>
                                        <span>6</span>
                                    </div>

                                    <div class="col-lg-12 col-md-12 col-sm-12" style="margin-top: 15px;">
                                        <p>北京市海淀区五道口地区(清华大学)</p>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12 navTop">
                                        <span>0</span>
                                        <span>1</span>
                                        <span>2</span>
                                        <span>3</span>
                                        <span>1</span>
                                        <span>0</span>
                                        <span>6</span>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12" style="margin-top: 15px;">
                                        <p>北京市海淀区清华西路28号(圆明园)</p>
                                    </div>
                                    <div class="col-lg-12 col-md-12 col-sm-12 navTop">
                                        <span>0</span>
                                        <span>1</span>
                                        <span>0</span>
                                        <span>1</span>
                                        <span>2</span>
                                        <span>5</span>
                                        <span>6</span>
                                    </div>
                                </div>

                                <div class="col-lg-12 col-md-12 col-sm-12 rightMiddle">
                                    <div class="row">
                                        <div class="col-lg-12 col-md-12 col-sm-12" style="margin-top: 10px">
                                            <span style="height: 30px;line-height: 30px;font-family: 'Microsoft';font-size:13px; color: #fff;margin-left: 10px ">物联设备状态</span>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6"
                                             style="position: relative; height: 200px;">
                                            <span style="color: #ffd055;font-family: 'Microsoft';font-size: 13px;margin-left: 15px;margin-right: 5px">井盖传感器故障率</span><a
                                                href="#" style=
                                                "display: inline-block;background: #ffd055;color: #000;font-family: 'Microsoft';font-size: 13px;position: relative;z-index: 1111;
                                                    height:20px;text-align: center;line-height: 20px;padding-left: 10px;padding-right: 10px;border-radius: 5px;"
                                                onclick="queryErrorShaftCoverSensor()">查看设备</a>
                                            <div id="rightMiddle1"
                                                 style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;">

                                            </div>
                                        </div>
                                        <div class="col-lg-6 col-md-6 col-sm-6"
                                             style="position: relative; height: 200px;">
                                            <span style="color: #7ecef4;font-family: 'Microsoft';font-size: 13px;margin-left: 6px;margin-right: 5px">有害气体传感器故障率</span><a
                                                href="#" style=
                                                "display: inline-block;background: #7ecef4;color: #000;font-family: 'Microsoft';font-size: 13px;position: relative;z-index: 1111;
                                                    height:20px;text-align: center;line-height: 20px;padding-left: 10px;padding-right: 10px;border-radius: 5px;"
                                                onclick="queryErrorGasSensor()">查看设备</a>
                                            <div id="rightMiddle12"
                                                 style="position: absolute; top: 0; left: 0; right: 0; bottom: 0;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-lg-12 col-md-12 col-sm-12 rightBottom">
                                    <span style="height: 30px;line-height: 30px;font-family: 'Microsoft';font-size:13px; color: #fff;margin-left: 10px ">设备告警信息</span>

                                    <ul class="col-lg-12 col-md-12 col-sm-12" id="ullist">
                                        <!--<li>-->
                                            <!--<p>海淀区海淀南路13号楼一层04号a83904井盖</p>-->
                                            <!--<p>2018-05-20 12:28:04</p><span style="background:#4dc4cd"-->
                                                                            <!--onclick="shaftCoverSensorErrorEvent(1)">震动报警</span>-->
                                        <!--</li>-->

                                        <!--<li>-->
                                            <!--<p>海淀南路艾瑟顿商业广场 a83116井盖</p>-->
                                            <!--<p>2018-05-20 12:27:59</p><span style="background:#4dc4cd"-->
                                                                            <!--onclick="shaftCoverSensorErrorEvent(2)">震动报警</span>-->
                                        <!--<li>-->
                                            <!--<p>北京海淀区海淀南路13号亿方大厦2楼(苏州街路口) a548827井室</p>-->
                                            <!--<p>2018-05-20 12:25:54</p><span style="background:#cc4749"-->
                                                                            <!--onclick="gasSensorErrorEvent(1)">有害气体</span>-->
                                        <!--</li>-->

                                        <!--<li>-->
                                            <!--<p>北京市海淀区苏州街20号 a884622井室</p>-->

                                            <!--<p>2018-05-20 11:18:27</p><span style="background:#cc4749"-->
                                                                            <!--onclick="gasSensorErrorEvent(1)">有害气体</span>-->
                                        <!--</li>-->
                                        <!--<li>-->
                                        <!--<p>北京市海淀区苏州街29号北95号平房 c10010井盖</p>-->
                                        <!--<p>2018-05-20 11:18:27</p><span style="background:#1651ac"-->
                                                                        <!--onclick="shaftCoverSensorErrorEvent(3)">潜水报警</span>-->
                                    <!--</li>-->
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
</body>

<script>
    $(document).ready(function () {
        $('.flexslider').flexslider({
            directionNav: true,
            pauseOnAction: false
        });
        //井盖监测
        shaftStatusMonitor();
        //井内有毒气体
        gasSensorMonitor();

        //人流量
        getPerson();
//        物联设备状态--井盖传感器故障率
        shaftCoverSensorPercentage()


        gasSensorPercentage()
        //设备警告信息

        gasSensorEvent()

        //物联网接口
        getUnitBySmId(17);


        //时间
        getNowDate()

    });

    $('#btn4').on('click', function () {
        div1();
        clearInterval(add);
        $(this).removeClass('btn5');
        $(this).addClass('btn4');
        $('#btn5').removeClass('btn4');
        $('#btn5').addClass('btn5');

    });
    $('#btn5').on('click', function () {
        div2();
        $(this).removeClass('btn5');
        $(this).addClass('btn4');
        $('#btn4').removeClass('btn4');
        $('#btn4').addClass('btn5');
        click1();
    });
    var add;

    function click1() {
        clearInterval(add);
        add = setInterval(function () {
            div2();
        }, 5000)
    }
    function getPerson() {
        $.ajax({
            url: 'bigScreen/findPopulation',
            type: 'GET',
            data: 'JSON',
            success: function (data) {
                if (data.message == "查询成功！") {
                }
            }
        })
    }


    //井盖的
    function shaftStatusMonitor() {
        $.ajax({
            url: '/bigScreen/shaftStatusMonitor',
            type: 'GET',
            data: 'JSON',
            success: function (data) {
                // var data=JSON.parse(data)
                var count = [];
                var errorCount = [];

                var holeCount=0;
                var warningcount=0
                data.forEach(function (t) {
                    count.push(t.holeCount);
                    holeCount+=parseInt(t.holeCount);
                    errorCount.push(t.warningcount);
                    warningcount+=parseInt(t.warningcount);
                });
                $("#jgt").text(holeCount);
                $("#jgt1").text(warningcount);
                var myChart2 = echarts.init(document.getElementById('leftTop'));
                var option1 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    color: ['#ecc152', '#3693ff'],
                    legend: {
                        data: ['工作中', '告警中'],
                        textStyle: {
                            color: '#1f81c6'
                        }
                    },

                    grid: {
                        top: '25%',
                        left: '3%',
                        right: '4%',
                        bottom: '20%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: ['供热', '供水', '供电', '供气', '排水', '联通'],
                            splitLine: {show: false},//去除网格线
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#1f81c6'
                                },
                                interval: 0
                            },

                            axisLine: {
                                lineStyle: {
                                    width: 0 //这里是坐标轴的宽度,为0就是不显示
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {show: false},//去除网格线
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#1f81c6'
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 0 //这里是坐标轴的宽度,为0就是不显示
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '工作中',
                            type: 'bar',
                            barWidth: 8,//柱图宽度
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 8
                                }
                            },
                            data: count
                        },
                        {
                            name: '告警中',
                            type: 'bar',
                            barWidth: 8,//柱图宽度
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 8
                                }
                            },
                            data: errorCount
                        }


                    ]
                };
                myChart2.setOption(option1, true);
            }
        })
    }

    //井内有毒气体
    function gasSensorMonitor() {
        $.ajax({
            url: 'bigScreen/gasSensorMonitor',
            data: 'JSON',
            type: 'GET',
            success: function (data) {
                // var data=JSON.parse(data)
                var count = [];
                var errorCount = [];

                var holeCount=0;
                var warningcount=0
                data.forEach(function (t) {
                    count.push(t.holeCount);
                    holeCount+=parseInt(t.holeCount);
                    errorCount.push(t.warningcount);
                    warningcount+=parseInt(t.warningcount);
                });
                $("#jgtq").text(holeCount);
                $("#jgtq1").text(warningcount);
                var myChartt = echarts.init(document.getElementById('leftMiddle'));
                var option2 = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    grid: {
                        top: '8%',
                        left: '3%',
                        right: '4%',
                        bottom: '20%',
                        containLabel: true
                    },
                    color: ['#41b56d', '#ec5d89'],
                    xAxis: [
                        {
                            type: 'category',
                            data: ['供热', '供水', '供电', '供气', '排水', '联通'],
                            splitLine: {show: false},//去除网格线
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#1f81c6'
                                },
                                interval: 0
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 0 //这里是坐标轴的宽度,为0就是不显示
                                }
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            splitLine: {show: false},//去除网格线
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#1f81c6'
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    width: 0 //这里是坐标轴的宽度,为0就是不显示
                                }
                            }
                        }
                    ],
                    series: [
                        {
                            name: '井室总数量',
                            type: 'bar',
                            barWidth: 8,//柱图宽度
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 8
                                }
                            },
                            data: count
                        },
                        {
                            name: '异常井室数量',
                            type: 'bar',
                            barWidth: 8,//柱图宽度
                            itemStyle: {
                                normal: {
                                    barBorderRadius: 8
                                }
                            },
                            data: errorCount
                        }
                    ]
                };
                myChartt.setOption(option2, true)
            }
        })
    }

    //物联设备状态--井盖传感器故障率
    function shaftCoverSensorPercentage() {
        $.ajax({
            url: 'bigScreen/holefailurerate',
            data: 'JSON',
            type: 'GET',
            success: function (data) {

                var num = 0;
                num = (data.warningsize/data.holecount).toFixed(2) * 100;
                var myChart = echarts.init(document.getElementById('rightMiddle1'));
                //    var myChart1 = echarts.init(document.getElementById('rightMiddle2'));
                // 指定图表的配置项和数据
                var option = {
                    color: '#fff',
                    tooltip: {
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    series: [
                        {
                            name: '速度',
                            type: 'gauge',
                            min: 0,
                            max: 100,
                            splitNumber: 4,
                            radius: '60%',
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[1, '#f7c71f']],
                                    width: 4,
                                    shadowBlur: 10
                                }
                            },

                            axisLabel: {            // 坐标轴小标记
                                textStyle: {       // 属性lineStyle控制线条样式
                                    fontWeight: '100',
                                    color: '#6289a8',
                                    shadowColor: '#fff', //默认透明
                                    fontSize: 10
                                }
                            },
                            pointer: {           // 分隔线  0cff00
                                length: '30%',
                                color: [[1, '#0cff00']],
                                width: 3,
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 0
                            },
                            axisTick: {            // 坐标轴小标记
                                length: 0,        // 属性length控制线长


                            },
                            splitLine: {           // 分隔线
                                length: 6,         // 属性length控制线长
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    width: 0,
                                    color: 'rgba(0,0,0,.0)',
                                }

                            },

                            title: {
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    color: 'rgba(0,0,0,.0)',
                                }
                            },
                            detail: {
                                formatter: '{value}%',
                                offsetCenter: [0, '80%'],       // x, y，单位px
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: '200',
                                    color: '#fdd424',
                                    fontSize: 16,
                                }
                            },

                            data: [{value: num, name: ''}]
                        },
                        {
                            type: 'gauge',
                            radius: '68%',
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[1, '#f7c71f']],
                                    width: 2,
                                }
                            },
                            axisLabel: {            // 坐标轴小标记
                                textStyle: {       // 属性lineStyle控制线条样式
                                    color: 'rgba(0,0,0,.0)',
                                }
                            },
                            axisTick: {            // 坐标轴小标记
                                length: 0,        // 属性length控制线长

                            },
                            splitLine: {           // 分隔线
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    color: 'rgba(0,0,0,.0)',
                                }

                            },
                            pointer: {           // 分隔线
                                show: false,

                            },
                            title: {
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    color: 'rgba(0,0,0,.0)',
                                }
                            },
                            detail: {
                                textStyle: {
                                    color: 'rgba(0,0,0,.0)',

                                }
                            },
                            data: [{value: 0, name: ''}]
                        }
                    ]
                };
                myChart.setOption(option, true);
            }
        })
    }

    //物联设备状态--有害气体传感器故障率(右中右)
    function gasSensorPercentage() {
        $.ajax({
            url: "bigScreen/gasholefailurerate",
            type: 'GET',
            data: "JSON",
            success: function (data) {
                var num = 0;
                num = (data.warningsize/data.holecount).toFixed(2) * 100;
                var myChartmy = echarts.init(document.getElementById('rightMiddle12'));
                //    var myChart1 = echarts.init(document.getElementById('rightMiddle2'));

                // 指定图表的配置项和数据
                var optionmy = {
                    color: '#fff',
                    tooltip: {
                        formatter: "{a} <br/>{b} : {c}%"
                    },
                    series: [
                        {
                            name: '速度',
                            type: 'gauge',
                            min: 0,
                            max: 100,
                            splitNumber: 4,
                            radius: '60%',
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[1, '#1c81f7']],
                                    width: 4,
                                    shadowBlur: 10
                                }
                            },

                            axisLabel: {            // 坐标轴小标记
                                textStyle: {       // 属性lineStyle控制线条样式
                                    fontWeight: '200',
                                    color: '#6289a8',
                                    shadowColor: '#fff', //默认透明
                                    shadowBlur: 5,
                                    fontSize: 10
                                }
                            },
                            pointer: {           // 分隔线  0cff00
                                length: '30%',
                                color: [[1, '#0cff00']],
                                width: 3,
                                shadowColor: '#fff', //默认透明
                                shadowBlur: 0
                            },
                            axisTick: {            // 坐标轴小标记
                                length: 0,        // 属性length控制线长


                            },
                            splitLine: {           // 分隔线
                                length: 6,         // 属性length控制线长
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    width: 0,
                                    color: 'rgba(0,0,0,.0)',
                                }

                            },

                            title: {
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    color: 'rgba(0,0,0,.0)',
                                }
                            },
                            detail: {
                                formatter: '{value}%',
                                offsetCenter: [0, '80%'],       // x, y，单位px
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    fontWeight: '200',
                                    color: '#63a8f8',
                                    fontSize: 16,
                                }
                            },

                            data: [{value: num, name: ''}]
                        },
                        {
                            type: 'gauge',
                            radius: '68%',
                            axisLine: {            // 坐标轴线
                                lineStyle: {       // 属性lineStyle控制线条样式
                                    color: [[1, '#1c81f7']],
                                    width: 2,
                                }
                            },
                            axisLabel: {            // 坐标轴小标记
                                textStyle: {       // 属性lineStyle控制线条样式
                                    color: 'rgba(0,0,0,.0)',
                                }
                            },
                            axisTick: {            // 坐标轴小标记
                                length: 0,        // 属性length控制线长

                            },
                            splitLine: {           // 分隔线
                                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                                    color: 'rgba(0,0,0,.0)',
                                }

                            },
                            pointer: {           // 分隔线
                                show: false,

                            },
                            title: {
                                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                    color: 'rgba(0,0,0,.0)',
                                }
                            },
                            detail: {
                                textStyle: {
                                    color: 'rgba(0,0,0,.0)',

                                }
                            },
                            data: [{value: 0, name: ''}]
                        }
                    ]
                };
                myChartmy.setOption(optionmy, true);
            }
        })
    }

    //设备警告信息
    function gasSensorEvent() {
        $.ajax({
            url: 'bigScreen/gasSensorEvent',
            type: 'GET',
            data: 'JSON',
            success: function (data) {

                var data= JSON.parse(data);

                var data = data.splice(0,5);
                console.log(data)
                var html=""
                    for(var i=0;i<data.length;i++){
                   html +=" <li>\n" +
                        "<p>"+data[i].address+"</p>\n" +
                        "<p>"+data[i].dataTime+"</p><span id="+ data[i].status +" style=\"background:#4dc4cd\"\n" +
                        "                                onclick=\"zuan(this)\">震动报警</span>\n" +
                        "</li>";

                }


                $("#ullist").append(html)
                $('#2').text('有害气体').css('background','#cc4749');
                $('#4').text('有害气体').css('background','#cc4749');
                $('#8').text('溢水报警').css('background','#1651ac');

            }
        });
    }

    //物联网部件接口
    function getUnitBySmId(id) {
        $.ajax({
            url: 'unit/getUnitBySmId',
            type: "POST",
            data: {'smId': id},
            success: function (data1) {
                $('#content').empty();
                var html = "<ul>\n" +
                    " <li>\n" +
                    "     <span style=\"color:#2990da\">维护单位：</span>\n" +
                    "     <span style=\"color:#2bb57a\">" + data1.data.deptKeepName + "</span>\n" +
                    " </li>\n" +
                    " <li>\n" +
                    "     <span style=\"color:#2990da\">产权单位：</span>\n" +
                    "     <span style=\"color: #2bb57a\">" + data1.data.deptOwnerName + "</span>\n" +
                    " </li>\n" +
                    " <li>\n" +
                    "     <span style=\"color:#2990da\">管理单位：</span>\n" +
                    "     <span style=\"color:#2bb57a\">" + data1.data.deptMainName + "</span></li>\n" +
                    " <li>\n" +
                    "     <span style=\"color:#2990da\">获取时间：</span>\n" +
                    "     <span style=\"color:#2bb57a\">" + data1.data.cdate + "</span>\n" +
                    " </li>\n" +
                    " <li>\n" +
                    "     <span style=\"color:#2990da\">井盖状态：</span>\n" +
                    "     <span style=\"color:#2bb57a\">" + data1.data.statusName + "</span>\n" +
                    " </li>\n" +
                    " <li>\n" +
                    "     <span style=\"color:#2990da\">管 理 员：</span>\n" +
                    "     <span style=\"color: #2bb57a\">" + data1.data.empName + "</span>\n" +
                    " </li>\n" +
                    " <li>\n" +
                    "     <span style=\"color:#2990da\">井盖类型：</span>\n" +
                    "     <span style=\"color: #2bb57a\">" + data1.data.shaftCoverTypeName + "</span>\n" +
                    " </li>\n" +
                    "</ul>";
                $('#content').append(html);
            }
        })
    }

    //获取当前时间
    function getNowDate() {
        var date = new Date();
        var sign1 = "-";
        var sign2 = ":";
        var year = date.getFullYear() // 年
        var month = date.getMonth() + 1; // 月
        var day = date.getDate(); // 日
        var hour = date.getHours(); // 时
        var minutes = date.getMinutes(); // 分
        var seconds = date.getSeconds() //秒
        var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
        var week = weekArr[date.getDay()];
        // 给一位数数据前面加 “0”
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (day >= 0 && day <= 9) {
            day = "0" + day;
        }
        if (hour >= 0 && hour <= 9) {
            hour = "0" + hour;
        }
        if (minutes >= 0 && minutes <= 9) {
            minutes = "0" + minutes;
        }
        if (seconds >= 0 && seconds <= 9) {
            seconds = "0" + seconds;
        }
        var currentdate = year + sign1 + month + sign1 + day;
        $('.fa_right_time').html(currentdate)
    }

    function zuan(e) {
        if(e.innerHTML=="有害气体" && e.id==2){
            gasSensorErrorEvent(1)
        }else if(e.innerHTML=="有害气体" && e.id==4){
            gasSensorErrorEvent(2)
        }else if(e.id==1){
            shaftCoverSensorErrorEvent(1)
        }else{
            shaftCoverSensorErrorEvent(3)
        }


    }

    /*基站热力图*/
    function createHeatPointsForJZ(id) {
        $.goTo(/*[[@{toThermodynamicList}]]*/"./unit_list.html", function () {
            clearHeatPoints();
            var heatPoints = [];
            $.post("/thermodynamic/getThermodynamicForJZ", {"id": id}, function (data) {
                var num = data.data[0].countPopulation;
                // 热点半径,data代表事件数量
                var radius = 50, unit = "px", useGeoRadius = false;
                if ("degree" == unit) {
                    useGeoRadius = true;
                }
                heatMapLayer.radius = radius;
                for (var i = 0; i < num; i++) {
                    heatPoints[i] = new SuperMap.Feature.Vector(
                        new SuperMap.Geometry.Point(
                            data.data[i].lng,
                            data.data[i].lat
                        ),
                        {
                            "value": Math.random() * 4,
                            "geoRadius": null
                        }
                    );
                }
                heatMapLayer.addFeatures(heatPoints);
            });
        });

    }

    function clearHeatPoints() {
        heatMapLayer.removeAllFeatures();
    }

    function shaftCoverSensorErrorEvent(id) {
        clearStatus();
        if (id == 1) {
            getUnitBySmId(18);
        }
        if (id == 2) {
            getUnitBySmId(19);
        }
        if (id == 3) {
            getUnitBySmId(20);
        }
        $.getJSON("/bigScreen/shaftCoverSensorErrorEvent", {"id": id}, function (data) {
            $(data.data).each(function (index, item) {
                if (item.status == 1) {
                    putPhotoData(item.lon, item.lat, '../images/ZhenDong.gif');
                }
                if (item.status == 2) {
                    putPhotoData(item.lon, item.lat, '../images/YiShui.gif');
                }
                if (item.status == 4) {
                    putPhotoData(item.lon, item.lat, '../images/QingJiao.gif');
                }

            });
        });
    }

    function gasSensorErrorEvent(id) {
        clearStatus();
        if (id == 1) {
            getUnitBySmId(18);
        }
        if (id == 2) {
            getUnitBySmId(20);
        }
        $.getJSON("/bigScreen/gasSensorErrorEvent", {"id": id}, function (data) {
            $(data.data).each(function (index, item) {
                putPhotoData(item.lon, item.lat, '../images/YouHaiQiTi.gif');
            });
        });
    }


    /*]]>*/
</script>

<script type="text/javascript">


    var myChartDev = echarts.init(document.getElementById('centerBottom'));
    // 指定图表的配置项和数据
    var optionDev = {
        tooltip: {
            formatter: "{b}<br/>{a} : {c}",
            textStyle: {
                align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['震动', '溢水', '倾角', '甲烷浓度', '硫化氢浓度', '一氧化碳浓度', '氨气浓度'],
            textStyle: {
                color: '#69abce'
            }
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {show: false},//去除网格线
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#69abce'
                }
            },
            data: ['05-20', '05-21', '05-22', '05-23', '05-24', '05-25', '05-26', '05-27', '05-28', '05-29', '05-30'],

        },
        yAxis: {
            type: 'value',
            axisTick: {
                alignWithLabel: true
            },
            splitLine: {show: false},//去除网格线
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#1f81c6'
                }
            },
            axisLine: {
                lineStyle: {
                    width: 0 //这里是坐标轴的宽度,为0就是不显示
                }
            }
        },

        series: [{
            name: '震动',
            data: [82, 93, 90, 93, 12, 13, 13, 32, 89, 14, 12],
            type: 'line',
            symbol: 'emptyCircle',
            symbolSize: 5,
            smooth: true,
            sampling: 'average',
            itemStyle: {
                normal: {
                    color: '#74bde1',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                        offset: 0,
                        color: '#0f1e68'
                    }, {
                        offset: 1,
                        color: '#6f8df1'
                    }])
                }
            }
        },
            {
                name: '溢水',
                type: 'line',
                symbol: 'rect',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#1a61cb',
                    }
                },
                areaStyle: {}
            }, {
                name: '倾角',
                type: 'line',
                symbol: 'roundRect',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#cb8a1a'
                    }
                },
                areaStyle: {}
            }, {
                name: '甲烷浓度',
                type: 'line',
                symbol: 'triangle',
                symbolSize: 5,

                itemStyle: {
                    normal: {
                        color: '#90343e'
                    }
                },
                areaStyle: {}
            }, {
                name: '硫化氢浓度',
                type: 'line',
                symbol: 'diamond',
                symbolSize: 5,

                itemStyle: {
                    normal: {
                        color: '#aeb100'
                    }
                },
                areaStyle: {}
            }, {
                name: '一氧化碳浓度',
                symbol: 'pin',
                symbolSize: 5,
                type: 'line',
                itemStyle: {
                    normal: {
                        color: '#a52daa'
                    }
                },
                areaStyle: {}
            }, {
                name: '氨气浓度',
                // data: [30, 57, 85, 90, 75, 10, 50,11, 10, 50, 60],
                symbol: 'arrow',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#5a60c7'
                    }
                },
                type: 'line',
                areaStyle: {}
            }]

    };
    myChartDev.setOption(optionDev, true);


    var myChartDev1 = echarts.init(document.getElementById('centerBottom1'));

    var optionDev1 = {
        tooltip: {
            formatter: "{b}<br/>{a} : {c}",
            textStyle: {
                align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['震动', '溢水', '倾角', '甲烷浓度', '硫化氢浓度', '一氧化碳浓度', '氨气浓度'],
            textStyle: {
                color: '#69abce'
            }
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#69abce'
                }
            },
            data: ['05-20', '05-21', '05-22', '05-23', '05-24', '05-25', '05-26', '05-27', '05-28', '05-29', '05-30'],

        },
        yAxis: {
            type: 'value',
            axisTick: {
                alignWithLabel: true
            },
            splitLine: {show: false},//去除网格线
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#1f81c6'
                }
            },
            axisLine: {
                lineStyle: {
                    width: 0 //这里是坐标轴的宽度,为0就是不显示
                }
            }
        },
        series: [{
            name: '震动',
            type: 'line',
            symbol: 'emptyCircle',
            symbolSize: 5,
            sampling: 'average',
            itemStyle: {
                normal: {
                    color: '#74bde1',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                        offset: 0,
                        color: '#0f1e68'
                    }, {
                        offset: 1,
                        color: '#6f8df1'
                    }])
                }
            }
        },
            {
                name: '溢水',
                data: [83, 56, 56, 32, 89, 14, 12, 82, 93, 90, 93],
                type: 'line',
                symbol: 'rect',
                symbolSize: 5,
                smooth: true,
                itemStyle: {
                    normal: {
                        color: '#1a61cb',
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                            offset: 0,
                            color: '#0f1e68'
                        }, {
                            offset: 1,
                            color: '#6f8df1'
                        }])
                    }
                }

            }, {
                name: '倾角',
                // data: [45, 63, 85, 85, 10, 12, 14,52, 13, 45, 16],
                type: 'line',
                symbol: 'roundRect',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#cb8a1a'
                    }
                },
                areaStyle: {}
            }, {
                name: '甲烷浓度',
                // data: [58, 24, 12, 89, 44, 75, 58,45, 63, 85, 85],
                type: 'line',
                symbol: 'triangle',
                symbolSize: 5,

                itemStyle: {
                    normal: {
                        color: '#90343e'
                    }
                },
                areaStyle: {}
            }, {
                name: '硫化氢浓度',
                // data: [56, 12, 52, 13, 45, 16, 12,82, 93, 90, 93],
                type: 'line',
                symbol: 'diamond',
                symbolSize: 5,

                itemStyle: {
                    normal: {
                        color: '#aeb100'
                    }
                },
                areaStyle: {}
            }, {
                name: '一氧化碳浓度',
                // data: [11, 10, 50, 60, 70, 80, 90,56, 12, 52, 13],
                symbol: 'pin',
                symbolSize: 5,
                type: 'line',
                itemStyle: {
                    normal: {
                        color: '#a52daa'
                    }
                },
                areaStyle: {}
            }, {
                name: '氨气浓度',
                // data: [30, 57, 85, 90, 75, 10, 50,11, 10, 50, 60],
                symbol: 'arrow',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#5a60c7'
                    }
                },
                type: 'line',
                areaStyle: {}
            }]
    };
    //option3.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    myChartDev1.setOption(optionDev1, true);


    var myChartDev2 = echarts.init(document.getElementById('centerBottom2'));

    // 指定图表的配置项和数据
    var optionDev2 = {
        tooltip: {
            formatter: "{b}<br/>{a} : {c}",
            textStyle: {
                align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['震动', '溢水', '倾角', '甲烷浓度', '硫化氢浓度', '一氧化碳浓度', '氨气浓度'],
            textStyle: {
                color: '#69abce'
            }
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {show: false},//去除网格线
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#69abce'
                }
            },
            data: ['05-20', '05-21', '05-22', '05-23', '05-24', '05-25', '05-26', '05-27', '05-28', '05-29', '05-30'],

        },
        yAxis: {
            type: 'value',
            axisTick: {
                alignWithLabel: true
            },
            splitLine: {show: false},//去除网格线
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#1f81c6'
                }
            },
            axisLine: {
                lineStyle: {
                    width: 0 //这里是坐标轴的宽度,为0就是不显示
                }
            }
        },

        series: [{
            name: '震动',
            // data: [82, 93, 90, 93, 12, 13, 13, 32, 89, 14, 12],
            type: 'line',
            symbol: 'emptyCircle',
            symbolSize: 5,
            sampling: 'average',
            itemStyle: {
                normal: {
                    color: '#74bde1',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                        offset: 0,
                        color: '#0f1e68'
                    }, {
                        offset: 1,
                        color: '#6f8df1'
                    }])
                }
            }
        },
            {
                name: '溢水',
                // data: [83, 56, 56, 32, 89, 14, 12,82, 93, 90, 93],
                type: 'line',
                symbol: 'rect',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#1a61cb',
                    }
                },
                areaStyle: {}
            }, {
                name: '倾角',
                data: [45, 63, 85, 85, 10, 12, 14, 52, 13, 45, 16],
                type: 'line',
                symbol: 'roundRect',
                symbolSize: 5,
                smooth: true,
                itemStyle: {
                    normal: {
                        color: '#cb8a1a'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                            offset: 0,
                            color: '#0f1e68'
                        }, {
                            offset: 1,
                            color: '#6f8df1'
                        }])
                    }
                }
            }, {
                name: '甲烷浓度',
                // data: [58, 24, 12, 89, 44, 75, 58,45, 63, 85, 85],
                type: 'line',
                symbol: 'triangle',
                symbolSize: 5,

                itemStyle: {
                    normal: {
                        color: '#90343e'
                    }
                },
                areaStyle: {}
            }, {
                name: '硫化氢浓度',
                // data: [56, 12, 52, 13, 45, 16, 12,82, 93, 90, 93],
                type: 'line',
                symbol: 'diamond',
                symbolSize: 5,

                itemStyle: {
                    normal: {
                        color: '#aeb100'
                    }
                },
                areaStyle: {}
            }, {
                name: '一氧化碳浓度',
                // data: [11, 10, 50, 60, 70, 80, 90,56, 12, 52, 13],
                symbol: 'pin',
                symbolSize: 5,
                type: 'line',
                itemStyle: {
                    normal: {
                        color: '#a52daa'
                    }
                },
                areaStyle: {}
            }, {
                name: '氨气浓度',
                // data: [30, 57, 85, 90, 75, 10, 50,11, 10, 50, 60],
                symbol: 'arrow',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#5a60c7'
                    }
                },
                type: 'line',
                areaStyle: {}
            }]


    };

    //option3.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    myChartDev2.setOption(optionDev2, true);


    var myChartDev3 = echarts.init(document.getElementById('centerBottom3'));

    // 指定图表的配置项和数据
    var optionDev3 = {
        tooltip: {
            formatter: "{b}<br/>{a} : {c}",
            textStyle: {
                align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['震动', '溢水', '倾角', '甲烷浓度', '硫化氢浓度', '一氧化碳浓度', '氨气浓度'],
            textStyle: {
                color: '#69abce'
            }
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {show: false},//去除网格线
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#69abce'
                }
            },
            data: ['05-20', '05-21', '05-22', '05-23', '05-24', '05-25', '05-26', '05-27', '05-28', '05-29', '05-30'],

        },
        yAxis: {
            type: 'value',
            axisTick: {
                alignWithLabel: true
            },
            splitLine: {show: false},//去除网格线
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#1f81c6'
                }
            },
            axisLine: {
                lineStyle: {
                    width: 0 //这里是坐标轴的宽度,为0就是不显示
                }
            }
        },

        series: [{
            name: '震动',
            // data: [82, 93, 90, 93, 12, 13, 13, 32, 89, 14, 12],
            type: 'line',
            symbol: 'emptyCircle',
            symbolSize: 5,
            sampling: 'average',
            itemStyle: {
                normal: {
                    color: '#74bde1',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                        offset: 0,
                        color: '#0f1e68'
                    }, {
                        offset: 1,
                        color: '#6f8df1'
                    }])
                }
            }
        },
            {
                name: '溢水',
                // data: [83, 56, 56, 32, 89, 14, 12,82, 93, 90, 93],
                type: 'line',
                symbol: 'rect',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#1a61cb',
                    }
                },
                areaStyle: {}
            }, {
                name: '倾角',
                // data: [45, 63, 85, 85, 10, 12, 14,52, 13, 45, 16],
                type: 'line',
                symbol: 'roundRect',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#cb8a1a'
                    }
                },
                areaStyle: {}
            }, {
                name: '甲烷浓度',
                data: [58, 24, 12, 89, 44, 75, 58, 45, 63, 85, 85],
                type: 'line',
                symbol: 'triangle',
                symbolSize: 5,
                smooth: true,
                itemStyle: {
                    normal: {
                        color: '#90343e'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                            offset: 0,
                            color: '#0f1e68'
                        }, {
                            offset: 1,
                            color: '#6f8df1'
                        }])
                    }
                }
            }, {
                name: '硫化氢浓度',
                // data: [56, 12, 52, 13, 45, 16, 12,82, 93, 90, 93],
                type: 'line',
                symbol: 'diamond',
                symbolSize: 5,

                itemStyle: {
                    normal: {
                        color: '#aeb100'
                    }
                },
                areaStyle: {}
            }, {
                name: '一氧化碳浓度',
                // data: [11, 10, 50, 60, 70, 80, 90,56, 12, 52, 13],
                symbol: 'pin',
                symbolSize: 5,
                type: 'line',
                itemStyle: {
                    normal: {
                        color: '#a52daa'
                    }
                },
                areaStyle: {}
            }, {
                name: '氨气浓度',
                // data: [30, 57, 85, 90, 75, 10, 50,11, 10, 50, 60],
                symbol: 'arrow',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#5a60c7'
                    }
                },
                type: 'line',
                areaStyle: {}
            }]


    };


    //option3.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    myChartDev3.setOption(optionDev3, true);


    var myChartDev4 = echarts.init(document.getElementById('centerBottom4'));

    // 指定图表的配置项和数据
    var optionDev4 = {
        tooltip: {
            formatter: "{b}<br/>{a} : {c}",
            textStyle: {
                align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['震动', '溢水', '倾角', '甲烷浓度', '硫化氢浓度', '一氧化碳浓度', '氨气浓度'],
            textStyle: {
                color: '#69abce'
            }
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {show: false},//去除网格线
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#69abce'
                }
            },
            data: ['05-20', '05-21', '05-22', '05-23', '05-24', '05-25', '05-26', '05-27', '05-28', '05-29', '05-30'],

        },
        yAxis: {
            type: 'value',
            axisTick: {
                alignWithLabel: true
            },
            splitLine: {show: false},//去除网格线
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#1f81c6'
                }
            },
            axisLine: {
                lineStyle: {
                    width: 0 //这里是坐标轴的宽度,为0就是不显示
                }
            }
        },

        series: [{
            name: '震动',
            // data: [82, 93, 90, 93, 12, 13, 13, 32, 89, 14, 12],
            type: 'line',
            symbol: 'emptyCircle',
            symbolSize: 5,
            sampling: 'average',
            itemStyle: {
                normal: {
                    color: '#74bde1',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                        offset: 0,
                        color: '#0f1e68'
                    }, {
                        offset: 1,
                        color: '#6f8df1'
                    }])
                }
            }
        },
            {
                name: '溢水',
                // data: [83, 56, 56, 32, 89, 14, 12,82, 93, 90, 93],
                type: 'line',
                symbol: 'rect',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#1a61cb',
                    }
                },
                areaStyle: {}
            }, {
                name: '倾角',
                // data: [45, 63, 85, 85, 10, 12, 14,52, 13, 45, 16],
                type: 'line',
                symbol: 'roundRect',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#cb8a1a'
                    }
                },
                areaStyle: {}
            }, {
                name: '甲烷浓度',
                // data: [58, 24, 12, 89, 44, 75, 58,45, 63, 85, 85],
                type: 'line',
                symbol: 'triangle',
                symbolSize: 5,

                itemStyle: {
                    normal: {
                        color: '#90343e'
                    }
                },
                areaStyle: {}
            }, {
                name: '硫化氢浓度',
                data: [56, 12, 52, 13, 45, 16, 12, 82, 93, 90, 93],
                type: 'line',
                symbol: 'diamond',
                symbolSize: 5,
                smooth: true,
                itemStyle: {
                    normal: {
                        color: '#aeb100'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                            offset: 0,
                            color: '#0f1e68'
                        }, {
                            offset: 1,
                            color: '#6f8df1'
                        }])
                    }
                }
            }, {
                name: '一氧化碳浓度',
                // data: [11, 10, 50, 60, 70, 80, 90,56, 12, 52, 13],
                symbol: 'pin',
                symbolSize: 5,
                type: 'line',
                itemStyle: {
                    normal: {
                        color: '#a52daa'
                    }
                },
                areaStyle: {}
            }, {
                name: '氨气浓度',
                // data: [30, 57, 85, 90, 75, 10, 50,11, 10, 50, 60],
                symbol: 'arrow',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#5a60c7'
                    }
                },
                type: 'line',
                areaStyle: {}
            }]


    };


    //option3.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    myChartDev4.setOption(optionDev4, true);


    var myChartDev5 = echarts.init(document.getElementById('centerBottom5'));

    // 指定图表的配置项和数据
    var optionDev5 = {
        tooltip: {
            formatter: "{b}<br/>{a} : {c}",
            textStyle: {
                align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['震动', '溢水', '倾角', '甲烷浓度', '硫化氢浓度', '一氧化碳浓度', '氨气浓度'],
            textStyle: {
                color: '#69abce'
            }
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {show: false},//去除网格线
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#69abce'
                }
            },
            data: ['05-20', '05-21', '05-22', '05-23', '05-24', '05-25', '05-26', '05-27', '05-28', '05-29', '05-30'],

        },
        yAxis: {
            type: 'value',
            axisTick: {
                alignWithLabel: true
            },
            splitLine: {show: false},//去除网格线
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#1f81c6'
                }
            },
            axisLine: {
                lineStyle: {
                    width: 0 //这里是坐标轴的宽度,为0就是不显示
                }
            }
        },
        series: [{
            name: '震动',
            // data: [82, 93, 90, 93, 12, 13, 13, 32, 89, 14, 12],
            type: 'line',
            symbol: 'emptyCircle',
            symbolSize: 5,
            sampling: 'average',
            itemStyle: {
                normal: {
                    color: '#74bde1',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                        offset: 0,
                        color: '#0f1e68'
                    }, {
                        offset: 1,
                        color: '#6f8df1'
                    }])
                }
            }
        },
            {
                name: '溢水',
                // data: [83, 56, 56, 32, 89, 14, 12,82, 93, 90, 93],
                type: 'line',
                symbol: 'rect',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#1a61cb',
                    }
                },
                areaStyle: {}
            }, {
                name: '倾角',
                // data: [45, 63, 85, 85, 10, 12, 14,52, 13, 45, 16],
                type: 'line',
                symbol: 'roundRect',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#cb8a1a'
                    }
                },
                areaStyle: {}
            }, {
                name: '甲烷浓度',
                // data: [58, 24, 12, 89, 44, 75, 58,45, 63, 85, 85],
                type: 'line',
                symbol: 'triangle',
                symbolSize: 5,

                itemStyle: {
                    normal: {
                        color: '#90343e'
                    }
                },
                areaStyle: {}
            }, {
                name: '硫化氢浓度',
                // data: [56, 12, 52, 13, 45, 16, 12,82, 93, 90, 93],
                type: 'line',
                symbol: 'diamond',
                symbolSize: 5,

                itemStyle: {
                    normal: {
                        color: '#aeb100'
                    }
                },
                areaStyle: {}
            }, {
                name: '一氧化碳浓度',
                data: [11, 10, 50, 60, 70, 80, 90, 56, 12, 52, 13],
                symbol: 'pin',
                symbolSize: 5,
                type: 'line',
                smooth: true,
                itemStyle: {
                    normal: {
                        color: '#a52daa'
                    }
                },
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                            offset: 0,
                            color: '#0f1e68'
                        }, {
                            offset: 1,
                            color: '#6f8df1'
                        }])
                    }
                }
            }, {
                name: '氨气浓度',
                // data: [30, 57, 85, 90, 75, 10, 50,11, 10, 50, 60],
                symbol: 'arrow',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#5a60c7'
                    }
                },
                type: 'line',
                areaStyle: {}
            }]


    };


    //option3.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    myChartDev5.setOption(optionDev5, true);


    var myChartDev6 = echarts.init(document.getElementById('centerBottom6'));

    // 指定图表的配置项和数据
    var optionDev6 = {
        tooltip: {
            formatter: "{b}<br/>{a} : {c}",
            textStyle: {
                align: 'left'
            },
            trigger: 'axis',
            axisPointer: {
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['震动', '溢水', '倾角', '甲烷浓度', '硫化氢浓度', '一氧化碳浓度', '氨气浓度'],
            textStyle: {
                color: '#69abce'
            }
        },
        grid: {
            top: '20%',
            left: '3%',
            right: '4%',
            bottom: '20%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            splitLine: {show: false},//去除网格线
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#69abce'
                }
            },
            data: ['05-20', '05-21', '05-22', '05-23', '05-24', '05-25', '05-26', '05-27', '05-28', '05-29', '05-30'],

        },
        yAxis: {
            type: 'value',
            axisTick: {
                alignWithLabel: true
            },
            splitLine: {show: false},//去除网格线
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#1f81c6'
                }
            },
            axisLine: {
                lineStyle: {
                    width: 0 //这里是坐标轴的宽度,为0就是不显示
                }
            }
        },

        series: [{
            name: '震动',
            //data: [82, 93, 90, 93, 12, 13, 13, 32, 89, 14, 12],
            type: 'line',
            symbol: 'emptyCircle',
            symbolSize: 5,
            sampling: 'average',
            itemStyle: {
                normal: {
                    color: '#74bde1',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                        offset: 0,
                        color: '#0f1e68'
                    }, {
                        offset: 1,
                        color: '#6f8df1'
                    }])
                }
            }
        },
            {
                name: '溢水',
                // data: [83, 56, 56, 32, 89, 14, 12,82, 93, 90, 93],
                type: 'line',
                symbol: 'rect',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#1a61cb',
                    }
                },
                areaStyle: {}
            }, {
                name: '倾角',
                // data: [45, 63, 85, 85, 10, 12, 14,52, 13, 45, 16],
                type: 'line',
                symbol: 'roundRect',
                symbolSize: 5,
                itemStyle: {
                    normal: {
                        color: '#cb8a1a'
                    }
                },
                areaStyle: {}
            }, {
                name: '甲烷浓度',
                // data: [58, 24, 12, 89, 44, 75, 58,45, 63, 85, 85],
                type: 'line',
                symbol: 'triangle',
                symbolSize: 5,

                itemStyle: {
                    normal: {
                        color: '#90343e'
                    }
                },
                areaStyle: {}
            }, {
                name: '硫化氢浓度',
                // data: [56, 12, 52, 13, 45, 16, 12,82, 93, 90, 93],
                type: 'line',
                symbol: 'diamond',
                symbolSize: 5,

                itemStyle: {
                    normal: {
                        color: '#aeb100'
                    }
                },
                areaStyle: {}
            }, {
                name: '一氧化碳浓度',
                // data: [11, 10, 50, 60, 70, 80, 90,56, 12, 52, 13],
                symbol: 'pin',
                symbolSize: 5,
                type: 'line',
                itemStyle: {
                    normal: {
                        color: '#a52daa'
                    }
                },
                areaStyle: {}
            }, {
                name: '氨气浓度',
                data: [30, 57, 85, 90, 75, 10, 50, 11, 10, 50, 60],
                symbol: 'arrow',
                symbolSize: 5,
                smooth: true,
                itemStyle: {
                    normal: {
                        color: '#5a60c7'
                    }
                },
                type: 'line',
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, .8, [{
                            offset: 0,
                            color: '#0f1e68'
                        }, {
                            offset: 1,
                            color: '#6f8df1'
                        }])
                    }
                }

            }]


    };

    //option3.series[0].data[0].value = (Math.random() * 100).toFixed(2) - 0;
    myChartDev6.setOption(optionDev6, true);


</script>

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    $(function () {
        div1();
    });
    $.extend({
        goTo: function (url, data) {
            $("#iframe1").load(url, data, function (res) {
                return true;
            });
        }
    });

    function div1() {
        $.goTo(/*[[@{toUnitList}]]*/"./unit_list.html");
    }

    function div2() {
        $.goTo(/*[[@{toThermodynamicList}]]*/"./unit_list.html");
    }

    /*]]>*/
</script>

</html>